/*styles for home content only*/
@import "./../../../assets/scss/index.scss";
:host{display: block;height: 100%;}

.home-container{
    background: $bd-dark;
    padding: pxTorem(5px);
    position: relative;
    .home-title{
        height: 3rem;
        border: 1px solid #828282;
        color: $color-white;
        .title-item{
            border-right: 1px solid #828282;
            background: $bd-bottom-nav;
            position: relative;
        }
        .title-item:last-child{
            border: none;
        }
        .selected{
            position: absolute;
            right: pxTorem(4px);
            color: #999;
        }
        .active{
            color: #f2f2f2;
        }
    }
    .home-content{
        height: calc(100% - 3rem);
        background: $color-white;
        .home-item{
            border-bottom: 1px solid $border-dark;
            height: 10%;
            // padding: 0 pxTorem(20px);
            .name{
                padding: 0 pxTorem(12px);
            }
        }
        
        .wait-checked{
            color: $mpj-primary;
        }
        .checked{
            color: #cc0000;
        }
    }
}

.btn-normal{
    background: $color-white;
    color: $color-dark;
    padding: pxTorem(10px) pxTorem(6px);
    border: 1px solid $color-dark;
}
.btn-primary{
    border: 1px solid $mpj-primary;
}
.padding{
    padding: 0 pxTorem(10px);
}
.padding-s{
    padding: 0 pxTorem(6px);
}
.padding-m{
    padding: 0 pxTorem(20px);
}
.word-break{
    word-break: break-all;
}
.save-danger{
    color: #cc0000 !important;
}
.save-warning{
    color: #ff6600;
}
.save-normal{
    color: #000;
}
.remind-info{
    padding: pxTorem(5px) 0;
    text-align: center;
}
.color-shadow{
    color: #666;
}
// chefMake
.chef-make{
    background: $bd-dark;
    padding: pxTorem(5px);
    height: 100%;
    .info-box{
        border: 1px solid $mpj-primary;
        padding: pxTorem(10px) 0;
        text-align: center;
        min-height: 3.7rem;
        font-size: pxTorem(40px);
    }
    .make-title{
        height: 4rem;
        border: 1px solid #828282;
        color: $color-white;
        background: $bd-bottom-nav;
        font-size: pxTorem(24px);
        .material-icons{
            font-size: pxTorem(40px) !important;
        }
    }
    .make-content{
        background: $color-white;
        height: calc(100% - 4rem);
        ul{
            height: calc(100% - 5.6rem);
        }
        .make-detail{
            border-left: 1px solid #c3c3c3;
        }
    }
    .maker-item{
        width: 50%;
        height: pxTorem(70px);
        overflow: hidden;
        .maker-name{
            background: $bd-shallow-gray;
            padding: pxTorem(16px) pxTorem(10px);
            text-align: center;
            border: 1px solid $border-dark;
            color: $color-dark;
            width: 95%;
            margin: 0 auto;
            display: block;
            height: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: pxTorem(62px);
            padding: pxTorem(4px);

        }
    }
    .btn-add{
        width: 18%;
        background: $mpj-primary;
        color: $color-white;
        // .material-icons{
        //     font-size: pxTorem()
        // }
    }
    .padding-tb{
        padding: pxTorem(10px) 0;
    }

    .input-title{
        height: 2rem;
        font-size: pxTorem(16px);
    }
}


.btn-keyboard{
    padding: pxTorem(50px) 0;
    position: absolute;
    bottom: pxTorem(20px);
    width: 92%;
    margin: 0 auto;
    right: pxTorem(10px);
    left: pxTorem(10px);
}
.chef-make{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}